<template>
  <div class="recommend" ref="recommend">
		<!-- 内容层 -->
		<scroll ref="scroll" class="recommend-content" :dataA="discList"  >
			
			<div>
				<!-- 轮播图插件  scroll组件使用时 记得要嵌套一层父元素 -->
				<div ref="sliderWrapper" class="slider-wrapper" v-if="recommends.length">
					<slider>
							<div v-for="item in recommends" :key="item.id">
								<a :href="item.linkUrl"><img :src="item.picUrl" alt=""></a>
							</div>
					</slider>
				</div>
				<!-- 热门歌单推荐 -->
				<div class="recommend-list">
					<div class="list-title">热门歌单推荐</div>
					<ul>
						<li @click="selectItem(item)" v-for="(item,index) in discList" class="item"  :key="index">
							<div class="icon">
								<img @load="loadimgage" width="60" height="60" v-lazy="item.pic">
							</div>
							<div class="text">
								<h2 class="name" v-html="item.creator"></h2>
								<p class="desc" v-html="item.name"></p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- loading 延迟加载 -->
			<div class="loading-container" v-show="!discList.length" >
				<loading></loading>
			</div>
		</scroll>
		<!-- 视图层 -->
    <router-view/>
  </div>
</template>

<script>
import scroll from 'base/scroll/scroll'
import loading from 'base/loading/loading';
import {getRecommend} from 'api/recommend'; //首页请求方式
import slider from 'base/slider/slider';//轮播图组件
import {playlistMixin} from 'common/js/mixin'
import {ERR_OK,GEURL} from 'api/config'
import {mapMutations} from 'vuex'
export default {
	mixins: [playlistMixin],
  name:'recommend',
	data(){
		return{
			recommends:[],
			discList:[]
		}
	},
	created() {
		this._getrecommend()
		this._getDiscList()
	},
	methods:{
		handlePlaylist(playlist) {
			const bottom = playlist.length > 0 ? '60px' : ''
			this.$refs.recommend.style.bottom = bottom
			this.$refs.scroll.refresh()
		},
		_getrecommend(){ //首页请求数据
			getRecommend().then((res)=>{
				if(res.code===ERR_OK){this.recommends=res.data.slider}
			}).catch(()=>{console.log("rank_getTopList 出错")})
		},
		_getDiscList() {//获取歌单下拉列表链接
			this.$axios.get(GEURL).then((res)=>{
				if(res.status===200){this.discList=res.data.data}
			}).catch((err)=>{
				console.log("获取歌单下拉列表链接 出错")
			})
		},
		selectItem(item){
			console.log(item)
			this.$router.push({path:`/recommend/${item.id}`}),
			this.setDisc(item)
		},
		loadimgage(){//图片和列表显示时间不同的解决方案
			if(!this.checkLoaded){//这个方法只会执行一次 
				this.$refs.scroll.refresh()
				this.checkLoaded=true;
			}
		},
		...mapMutations({
			setDisc: 'SET_DISC'
		})
		
	},
	components:{
		slider,
		scroll,
		loading
	}
}
</script>

<style lang="scss" scoped >
		.recommend{
			@mixin ove{
				height: 100%;
				overflow: hidden;
			}
			position: fixed;
			width: 100%;
			top: 88px;
			bottom: 0;
			.recommend-content{
				@include ove();
				.slider-wrapper{
					position: relative;
					@include ove();
				}
			}
			.recommend-list{
				.list-title{
					height: 65px;
					line-height: 65px;
					text-align: center;
					font-size: $font-size-medium;
          color: $color-theme;
				}
				.item{
					display: flex;
					box-sizing: border-box;
					align-items: center;
					padding: 0 20px 20px 20px;
					.icon{
						flex: 0 0 60px;
						width: 60px;
						padding-right: 20px;
					}
					.text{
						display: flex;
						flex-direction:column;
						justify-content: center;
						flex: 1;
						line-height: 20px; 
						overflow: hidden;
						font-size: $font-size-medium;
							.name{
								margin-bottom: 10px;
								color: $color-text;
							}
							.desc{
								color: $color-text-d;
							}
					 }
				}
			}
			.loading-container{@include jucen()}
		}
</style>
